<template>
  <div>
    <div id="funnelEcharts" style="width: 100%; height: 230px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
onMounted(() => {
  funnelEcharts()
})
const funnelEcharts = () => {
  const myChart = echarts.init(document.getElementById('funnelEcharts') as HTMLElement)
  var colors = ['#3721FF', '#0066FF', '#ffc751', '#10D457', '#FFA100']

  const option = {
    color: colors,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: '漏斗图',
        type: 'funnel',
        left: '0%',
        height: '180',
        top: '5%',
        bottom: '5%',
        width: '40%',
        min: 0,
        max: 100,
        minSize: '30%',
        maxSize: '100%',
        gap: 0,
        label: {
          show: true,
          position: 'outer',
          formatter: function (params) {
            // params 包含数据信息，可以自定义返回内容
            return `{nameStyle|${params.name}}: {valueStyle|${params.value}人}`
          },
          rich: {
            nameStyle: {
              color: '#999', // 名称颜色
              fontSize: 14
            },
            valueStyle: {
              color: '#333', // 值颜色
              fontSize: 16,
              fontWeight: 'bold', // 加粗
              padding: [0, 0, 0, 5] // 可选：添加一些间距
            }
          }
        },
        labelLine: {
          show: true,
          length: 140,
          endSymbol: 'circle', // 末端圆形
          endSymbolSize: 8, // 圆形大小
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 100, name: '访问落地页' },
          { value: 75, name: '选择规格/套餐' },
          { value: 50, name: '填写表单' },
          { value: 25, name: '提交订单' }
        ]
      }
    ]
  }
  myChart.setOption(option)
}
</script>

<style scoped></style>
